<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
	<title>Sub Menu Test</title>
	<meta http-equiv="Content-Script-Type" content="text/javascript">

	<script type="text/javascript" src="/Javascript/prototype.js"></script>
	<script type="text/javascript" src="/Javascript/scriptaculous.js"></script>
	
	<style type="text/css">
		body
		{
			font-family: arial;
			background-color: #111111;
			color: #BBBBBB;
		}
		
		a
		{
			text-decoration: none;
			color: #222222;
		}
		
		.navContainer
		{
			float: left;
			width: 100%;
		}
		
		.menu
		{
			float: left;
		}
		
		.menuTop
		{
			margin: 15px;
			position: relative;
			float: left;
			background-color: #444444;
			border: 12px solid #DDDDDD;
			background-image: url('/images/dropDownMenu/topMenu.png');
			background-repeat: repeat-x;
			background-position: top left;
		}
		.menuTop a
		{
			padding: 5px;
			display: block;
			color: #DDDDDD;
		}
		
		
		.subMenuIcon
		{
			position: relative;
			display: inline;
			top: 1px;
			width: 15px;
			height: 15px;
			                                                                    
			background-image: url('/images/twotone/transparent/arrow-downright.png');
			background-repeat: no-repeat;
			background-position: top left;
		}
		
		.menuTop:hover .subMenuIcon
		{
			width: 15px;
			height: 15px;
			background-image: url('/images/twotone/transparent/arrow-down.png');
			background-repeat: no-repeat;
			background-position: top left;
		}
		
		.menuTop:hover
		{
			background-image: url('/images/dropDownMenu/topMenuHighlight.png');
			background-repeat: repeat-x;
			background-position: top left;
			background-color: #232323;
		}
		
		
		.menuContainerAction
		{       
			display: none;
		}
		
		.menuTop:hover .menuContainer
		{
			position: absolute;
			margin-top: 0px;
			margin-left: -2px;
			border: 2px solid #FFFFFF; //#232323;
			border-width: 2px 2px 2px 2px;
			background-color: #334488;
			
			z-index: 500;
		}
		.menuTopAction:hover .menuContainer
		{
			display: block;
		}
		
		
		.menuTop:hover .menuContainerDynamic
		{
			display: block;
			position: absolute;
			margin-top: 0px;
			margin-left: -2px;
			border: 2px solid #FFFFFF; //#232323;
			border-width: 2px 2px 2px 2px;
			background-color: #334488;
			
			z-index: 500;
		}
		
		.menuOption
		{                             
			border-style: solid;
			border-color: #232323;
			border-top: 2px;
			border-bottom: 2px;
			border-left: 2px;
			border-right: 2px;
		}
		
		.menuOption a
		{
			padding: 2px;
			display: block;
			color: #FFFFFF;
			background-color: #05273b;
			white-space:nowrap;
			
			font-size: 13px;
			background-image: url('/images/dropDownMenu/menuOption.png');
			background-repeat: repeat-x;
			background-position: bottom left;
		}
		
		.menuOption a:hover
		{
			display: block;
			color: #FFFFFF;
			background-color: #5577BB;
			
			background-image: url('/images/dropDownMenu/menuOptionHighlight.png');
			background-repeat: repeat-x;
			background-position: top left;
		}
		
	</style>
</head>

<body>
<div id="slidedown_demo" style="display:none;background:#333333; text-align:center;">
  <div>
    This is some test content. This is some test content.
  </div>
   <div>
    This is some test content. This is some test content.
  </div>
   <div>
    This is some test content. This is some test content.
  </div>
   <div>
    This is some test content. This is some test content.
  </div>
</div>
<ul>
  <li><a href="#" onclick="Effect.SlideDown('slidedown_demo'); return false;">Click here for a demo!</a></li>
  <li><a href="#" onclick="$('slidedown_demo').hide(); return false;">Reset</a></li>
</ul>

<div class='navContainer'>
	<div class='menu' id='menuID'>
		<div id='firstTopMenuItem' class='menuTop menuTopAction'>
			<a id='firstTopMenuItemLink' href='#'>game news <div id='iconID' class='subMenuIcon'>&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
			<div id='firstTopMenuContainer' class='menuContainer menuContainerAction'>
				<div id='a' class='menuOption'><a href='#'>rock paper shotgun</a></div>
				<div id='b' class='menuOption'><a href='#'>shack news</a></div>
				<div id='c' class='menuOption'><a href='#'>kotaku</a></div>
			</div>
		</div>
		
		<script type="text/javascript">
			var x = .2;
			
			//$('firstTopMenuContainer').removeClassName('menuContainer').addClassName('menuContainerDynamic');
			//$('firstTopMenuContainer').hide();
			
			
			$('firstTopMenuItem').removeClassName('menuTopAction');
			$('firstTopMenuContainer').removeClassName('menuContainerAction');
			$('firstTopMenuContainer').hide();
			
			Event.observe('firstTopMenuItem','mouseover', handleMouseOver.bindAsEventListener($('firstTopMenuItem'), 'menuID'));
			Event.observe('firstTopMenuItem','mouseout', handleMouseOut.bindAsEventListener($('firstTopMenuItem'), 'menuID'));
			
			function hasMouseEnteredTargetForFirstTime(e, targetForMouseOverID, targetsEnclosingElementID)
			{
				var fromTarg = (e.relatedTarget) ? e.relatedTarget : e.fromElement;
				
				while (fromTarg.id != targetsEnclosingElementID && fromTarg.id != targetForMouseOverID)
				{
					fromTarg = fromTarg.parentNode;
				}
				
				if (fromTarg.id == targetsEnclosingElementID)
				{
					return true;
				}                 
				
				// Handle event
				return false;
			}
			
			function hasMouseExitedTargetForFirstTime(e, targetForMouseOutID, targetsEnclosingElementID) 
			{
				if (!e) var e = window.event;
				var tg = (window.event) ? e.srcElement : e.target;
				
				var toTarg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
				
				while (toTarg != tg && toTarg.nodeName != 'BODY')
				{
					toTarg = toTarg.parentNode
				}
				if (toTarg == tg)
				{
					return false;
				}
				
				return true;
			}

			function handleMouseOver(e)
			{
				//e, targetForMouseOverID, targetsEnclosingElementID
				if(hasMouseEnteredTargetForFirstTime(e, this.id, this.ancestors()[0].id) == false)
					return;
				
				Effect.BlindDown('firstTopMenuContainer', {
						duration: x
						,restoreAfterFinish: true
						//,afterFinish: function() {$('firstTopMenuContainer').writeAttribute('style', null);}
						,queue: {scope:'mouseovermenulink', limit:1}
				});
			}
			
			function handleMouseOut(e)
			{
				//e, targetForMouseOverID, targetsEnclosingElementID
				if(hasMouseExitedTargetForFirstTime(e, this.id, this.ancestors()[0].id) == false)
					return;
				
				Effect.BlindUp('firstTopMenuContainer', {
						duration: x
						,restoreAfterFinish: true
						//,afterFinish: function() {$('firstTopMenuContainer').writeAttribute('style', null);}
						,queue: {scope:'mouseoutmenulink', limit:1}
				});
			}
			
			//Event.observe('firstTopMenuItem','mouseout', function(){
			//	Effect.BlindUp('firstTopMenuContainer', { duration: x, restoreAfterFinish: true
			//			,afterFinish: function() {$('firstTopMenuContainer').writeAttribute('style', null);}
			//	});
			//});
			
	
		</script>
		
		
		
		
		
		
		<div class='menuTop menuTopAction'>
			<a href='#'>game news <div class='subMenuIcon'>&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
			<div class='menuContainer'>
				<div class='menuOption'><a href='#'>rock paper shotgun</a></div>
				<div class='menuOption'><a href='#'>shack news</a></div>
				<div class='menuOption'><a href='#'>kotaku</a></div>
			</div>
		</div>
		<div class='menuTop'>
			<a href='#'>game news <div class='subMenuIcon'>&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
			<div class='menuContainer menuContainerAction'>
				<div class='menuOption'><a href='#'>rockpapershotgun</a></div>
				<div class='menuOption'><a href='#'>shack news</a></div>
				<div class='menuOption'><a href='#'>kotaku</a></div>
				<div class='menuOption'><a href='#'>rockpapershotgun</a></div>
				<div class='menuOption'><a href='#'>shack news</a></div>
				<div class='menuOption'><a href='#'>kotaku</a></div>
				<div class='menuOption'><a href='#'>rockpapershotgun</a></div>
				<div class='menuOption'><a href='#'>shack news</a></div>
				<div class='menuOption'><a href='#'>kotaku</a></div>
			</div>
		</div>
		<div class='menuTop'>
			<a href='#'>game news <div class='subMenuIcon'>&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
			<div class='menuContainer'>
				<div class='menuOption'><a href='#'>rockpapershotgun</a></div>
				<div class='menuOption'><a href='#'>shack news</a></div>
				<div class='menuOption'><a href='#'>kotaku</a></div>
			</div>
		</div>
		<div class='menuTop'>
			<a href='#'>game news <div class='subMenuIcon'>&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
			<div class='menuContainer'>
				<div class='menuOption'><a href='#'>rock paper shotgun</a></div>
				<div class='menuOption'><a href='#'>shack news</a></div>
				<div class='menuOption'><a href='#'>kotaku</a></div>
			</div>
		</div>
		<div class='menuTop'>
			<a href='#'>game news</a>
		</div>
		<!--
		<div class='menuTop'>
			<a href='#'>game news <div class='subMenuIcon'>&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
			<div class='menuContainer'>
				<div class='menuOption'><a href='#'>rockpapershotgun</a></div>
				<div class='menuOption'><a href='#'>shack news</a></div>
				<div class='menuOption'><a href='#'>kotaku</a></div>
			</div>
		</div>
		<div class='menuTop'>
			<a href='#'>game news <div class='subMenuIcon'>&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
			<div class='menuContainer'>
				<div class='menuOption'><a href='#'>rock paper shotgun</a></div>
				<div class='menuOption'><a href='#'>shack news</a></div>
				<div class='menuOption'><a href='#'>kotaku</a></div>
			</div>
		</div>
		<div class='menuTop'>
			<a href='#'>game news <div class='subMenuIcon'>&nbsp;&nbsp;&nbsp;&nbsp;</div></a>
			<div class='menuContainer'>
				<div class='menuOption'><a href='#'>rockpapershotgun</a></div>
				<div class='menuOption'><a href='#'>shack news</a></div>
				<div class='menuOption'><a href='#'>kotaku</a></div>
				<div class='menuOption'><a href='#'>rockpapershotgun</a></div>
				<div class='menuOption'><a href='#'>shack news</a></div>
				<div class='menuOption'><a href='#'>kotaku</a></div>
				<div class='menuOption'><a href='#'>rockpapershotgun</a></div>
				<div class='menuOption'><a href='#'>shack news</a></div>
				<div class='menuOption'><a href='#'>kotaku</a></div>
			</div>
		</div>
		<div class='menuTop'>
			<a href='#'>game news</a>
		</div>
		-->
	</div>
</div>
	<a id='ass' style='clear:both' href='#' >
	AAAAAAAAAAAAAAAAAAA
	</a>
	<div id='fart' style='clear:both'>
		<br>
		<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non ligula. Nunc semper. Suspendisse viverra nisl et ipsum. Nulla massa dolor, condimentum vitae, imperdiet ac, ornare sit amet, dolor. Proin convallis sodales mauris. Pellentesque tempor felis sed ipsum. Aliquam posuere pellentesque sem. Integer blandit erat dignissim nisi. Mauris vehicula interdum mi. Phasellus risus sem, vehicula nec, sagittis in, blandit et, dolor. Donec in odio. Aenean consectetur, odio a faucibus dictum, ipsum arcu fringilla tortor, eget tincidunt enim erat vel nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus non nulla quis dui sagittis ultrices. Donec tempor, neque in tempor congue, lectus est egestas est, non ullamcorper odio ante sit amet nulla.
		</p>
		<p>
		Suspendisse rhoncus nulla vehicula leo. Pellentesque nec mi eu nibh ultrices rutrum. Curabitur accumsan scelerisque nisl. Cras euismod, lorem sed iaculis ornare, tortor nulla malesuada tellus, vitae lacinia quam dolor sit amet massa. Vivamus vitae tellus. Vivamus vel ante. Cras nibh metus, faucibus nec, malesuada quis, condimentum et, neque. Mauris eu libero. Curabitur sit amet lacus. Fusce viverra, lacus ac dignissim vehicula, lorem dolor euismod metus, in semper pede eros vitae risus. Nam varius. Aenean id elit id nunc mollis fringilla. Cras porta sem a mi.
		</p>
	</div>
	
	
</body>
</html>